import * as React from 'react';
import {Menu, Icon, Spin, Dropdown, Avatar, Divider} from 'antd';
import {observer} from 'mobx-react'
// import moment from 'moment';
// import groupBy from 'lodash/groupBy';
import {Link} from 'react-router-dom';
// import NoticeIcon from '../NoticeIcon';
import './index.less';

@observer
export default class GlobalHeader extends React.Component<any> {

    public toggle = () => {
        const {collapsed, onCollapse} = this.props;
        onCollapse(!collapsed);
    };

    public render() {
        const {
            collapsed,
            isMobile,
            logo,
            onMenuClick,
        } = this.props;

        const {username,avatar} = this.props.appStore.userInfo;

        const menu = (
            <Menu className="header-menu" selectedKeys={[]} onClick={onMenuClick}>
                <Menu.Item disabled={true}>
                    <Icon type="user"/>个人中心
                </Menu.Item>
                <Menu.Item disabled={true}>
                    <Icon type="setting"/>设置
                </Menu.Item>
                <Menu.Divider/>
                <Menu.Item key="logout">
                    <Icon type="logout"/>退出登录
                </Menu.Item>
            </Menu>
        );
        // const noticeData = this.getNoticeData();
        return (
            <div className="global-header">
                {isMobile && [
                    <Link to="/" className="logo" key="logo">
                        <img src={logo} alt="logo" width="32"/>
                    </Link>,
                    <Divider type="vertical" key="line"/>,
                ]}
                <Icon
                    className="trigger"
                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
                    onClick={this.toggle}
                />
                <div className="right">
                    {username ? (
                        <Dropdown overlay={menu}>
                          <span className={`action account`}>
                            <Avatar size="small" className="avatar" src={avatar}/>
                            <span className="name">{username}</span>
                          </span>
                        </Dropdown>
                    ) : (
                        <Spin size="small" style={{marginLeft: 8}}/>
                    )}
                </div>
            </div>
        );
    }
}
